//1.引入Vue
import Vue from "vue";

//2.引入VueRouter
import VueRouter from "vue-router";

//引入组件
import Login from "../pages/Login"
import Home from "../pages/Home"
import News from "../pages/Home/news"
import Music from "../pages/Home/music"
import Games from "../pages/Home/Games"

//3.使用VueRouter插件
Vue.use(VueRouter);

//4.暴露路由器对象
export default new VueRouter({
    routes:[
        //一级路由login
        {path: "/login" , component: Login , name: "login"},
        //一级路由home
        {
            path: "/home" , 
            component: Home , 
            // name: "home",  有默认子路由就不能使用name
            //二级路由
            children:[
                //二级路由默认子路由 
                {path: "/" , redirect: "/home/news"},
                {path: "news" , component: News , name: "news"},

                //1.动态params传参
                {path: "music/:id/:time" , component: Music , name: "music",
                    //props为true是把动态parpms传参中的值给当前组件
                    props: true
                },

                //2.动态query传参
                {path: "games" , component: Games , name: "games",
                    //props为函数是把动态query传参中的值给当前组件
                    props: (router) => {
                        return router.query
                    }
                } ,
            ]
        },
        //路由重定向
        {path: "/" , redirect: "/home" }
    ]
})



